<template>
	<view class="padding-com text-df">
		<view style="position: relative;">
			<image src="https://api.anred.qrsk.net/applet/profile/image/exchange/point-detail-bg.png" mode="widthFix" style="width: 100%;"></image>
			<view style="position: absolute; top: 0; margin-top: 100rpx; margin-left: 50rpx;" class="text-white">
				<view class="text-lg">积分</view>
				<view class="" style="font-size: 64rpx;">{{detail.pointer}}</view>
			</view>
		</view>

		<view class="margin-top-sm text-bold text-lg">积分明细</view>

		<view class="margin-top-sm " v-for="(item,index) in detail.list" :key="index">
			<view class="flex-row-bt">
				<view class="flex-row">
					<!-- <image :src="item.img" style="width: 80rpx; height: 80rpx; border-radius: 50%;"></image> -->
					<view class="flex-column-sb margin-left-xs">
						<view>{{item.name}}</view>
						<view class="text-low text-sm margin-top-xs">{{item.createTime}}</view>
					</view>
				</view>
				<view :style="{color:(item.points.slice(0,1) == '+' ? '#FD8326':'#5B5B5B')}">{{item.points}}</view>
			</view>
			<divider :isLine="true" marginTop="10rpx"></divider>
		</view>

		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>

	</view>
	
	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { reactive } from 'vue';
	import { getPointsDetails } from "../../api/point/point";
import store from "../../store/login";

	const detail = reactive({
		pointer: '1200',
		list: [{
			"name": "活动2",
			"points": "+100",
			"createTime": "2024-03-28 18:34"
		}]
	})

	onLoad(() => {
		if (store.state.token != '') {
			getPointsDetails().then((res : any) => {
				detail.pointer = res.data.pointer
				detail.list = res.data.pointsDetailsVOList
			})
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>